import { VNode, h } from "vue";
import { TextComponentProps } from "./defaultProps";
/**
 * @desrciption 定义渲染组件接口具体映射字段
 * component:组件名称 'a-input'
 * value:组件默认内容
 * name:组件名称
 * extraProps:文本编辑默认属性
 * subComponent:子组件名称
 * options:多选项渲染 name:默认名称，value:默认值
 * initalTransform:将传入的值转换成组件需要的值
 * valueProps:组件存储值的方式名称
 * eventName:事件名称
 * events:对应的的事件{'click':()=>}
 * afterTransform:将更新的值进行满足store内存储的值类型转换
 */
export interface PropsToForm {
  component: string;
  name?: string;
  extraProps?: { [key: string]: any };
  options?: { name: string | VNode; value: any }[];
  subComponent?: string;
  initalTransform?: (v: any) => any;
  valueProp?: string;
  eventName?: string;
  afterTransform?: (v: any) => any;
}

/**
 * type类型别名
 * @description 定义所有属性的转换成组件的转换
 * [p in keyof TextComponentProps] 拿到所有元素属性的key值 [text,font-size,…]
 */
export type PropsToForms = {
  [p in keyof TextComponentProps]?: PropsToForm;
};

/**默认字体 */
const fontFamilyArr = [
  {
    name: "宋体",
    value: '"SimSun","STsong"',
  },
  {
    value: '"SimHei","STHeiti"',
    name: "黑体",
  },
  {
    value: '"KaiTi","STKaiti"',
    name: "楷体",
  },
  {
    value: '"FangSong","STFangsong"',
    name: "仿宋",
  },
];

const defaultFontWeight = [
  {
    name: "正常",
    value: "normal",
  },
  {
    name: "更粗",
    value: "bolder",
  },
  {
    name: "粗体",
    value: "bold",
  },
  {
    name: "更细",
    value: "lighter",
  },
];

const fontSelectOptionStyle = (options: any) => {
  return options.map((font: any) => {
    return {
      value: font.value,
      name: (
        <span style={{ fontFamily: font.value }}>{font.name}</span>
      ) as VNode,
      // name: h('span', { style: { fontFamily: font.value } }, font.name)
    };
  });
};

/**
 * @description 各个属性值对应转换的组件默认值
 */
export const mapPropsToForms: PropsToForms = {
  text: {
    component: "a-textarea",
    name: "文本",
    afterTransform: (e: any) => e.target.value,
  },
  fontSize: {
    component: "a-input-number",
    name: "字体",
    initalTransform: (v: string) => parseInt(v),
    afterTransform: (e: number) => (e ? `${e}px` : ""),
  },
  lineHeight: {
    component: "a-slider",
    name: "行高",
    extraProps: { min: 0, max: 3, step: 0.1 },
    initalTransform: (v: string) => parseFloat(v),
    afterTransform: (e: number) => e.toString(),
  },
  textAlign: {
    component: "a-radio-group",
    name: "对齐",
    subComponent: "a-radio-button",
    options: [
      {
        value: "left",
        name: "左",
      },
      {
        value: "right",
        name: "右",
      },
      {
        value: "center",
        name: "居中",
      },
    ],
    afterTransform: (e: any) => e.target.value,
  },
  fontFamily: {
    component: "a-select",
    name: "字体",
    subComponent: "a-select-option",
    options: [
      {
        value: "",
        name: "无",
      },
      ...fontSelectOptionStyle(fontFamilyArr),
    ],
  },
  color: {
    component: "color-picker",
    name: "字体颜色",
  },
};
